import React, {useEffect, useState} from "react"
import {observerDashboardPageWrapper} from "../../components/dashboardPages/ObserverDashboardPageWrapper";
import LoadableButton from "../../components/LoadableButton";
import {List, Pagination} from "antd";
import {PlusOutlined} from "@ant-design/icons";
import {OffsetDateTime, ZonedDateTime} from "@js-joda/core";
import {useLiveQuery} from "dexie-react-hooks";
import {myDatabase} from "../../database/MyDatabase";
import {Pageable} from "../../utils/Page";
import {useNavigate} from "react-router-dom";
import {DATE_WITH_TIME_FORMATER, preHandleObjectWithDateTimeParser} from "../../utils/Date";

export interface GoodsScratchPageProps {
}

const GoodsScratchPage: React.FC<GoodsScratchPageProps> = () => {
    const [pageable, setPageable] = useState(new Pageable())
    useEffect(() => {

    }, []);
    let list = useLiveQuery(() => myDatabase.goodsScratch.orderBy("id").reverse().offset(pageable.offset).limit(pageable.limit).toArray())??[];
    let navigate = useNavigate();
    return (
        <>
            <List header={<LoadableButton onClick={async () => {
                await myDatabase.goodsScratch.add({
                    createdDateTime: OffsetDateTime.now().toJSON(),
                })
            }}>
                <PlusOutlined/> 添加
            </LoadableButton>}>
                {list?.map(value => {
                    return <List.Item key={value.id} onClick={_ => {
                        navigate(`/goodsScratches/${value.id}`);
                    }} actions={[<LoadableButton size={"small"} danger onClick={async (event)=> {
                        event.stopPropagation()
                        await myDatabase.goodsScratchItem.where("scratchId").equals(value.id!!).delete();
                        await myDatabase.goodsScratch.delete(value.id!!);
                    }
                    }>删除</LoadableButton>]}>
                        {OffsetDateTime.parse(value.createdDateTime).format(DATE_WITH_TIME_FORMATER)}
                    </List.Item>
                })}
            </List>
            <Pagination/>
        </>
    )
}

export default observerDashboardPageWrapper(GoodsScratchPage, "goodsScratches", "货品草稿单")
